import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { connect } from "react-redux";
import { Toast } from "antd-mobile";
import "./index.scss";
import Button from "../../../component/button/index";
import BackModal from "../../../component/backModal/index";
import yhTools from "../../../tools/yh";
import { InterfaceG } from "../../../config/Config";
const camera = require("../../../images/icon/liveness/camera.png");

const remindImgList = [];
["", "", "", ""].map((item, index) =>
	remindImgList.push(require(`../../../images/icon/liveness/${index + 1}.png`))
);
/**
 * 小辉宝通户人脸
 */
@connect(state => ({
	authHeader: state.getAppPlatformsDatas.authHeaderStr
}))
class Liveness extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isRead: true,
			isVisible: false
		};
	}
	componentDidMount() {}

	/**获取face++的token */
	face_getFaceBizToken = async () => {
		Toast.loading("加载中...", 100);
		let objs = {
			url: InterfaceG.face_getFaceBizToken,
			params: { productNo: "1" }
		};
		let resp = await yhTools.request(objs);
		Toast.hide();
		if (resp.code === "0") {
			const token = resp.data.bizToken;
			return token;
		} else {
			Toast.info(resp.message, 2);
			return "";
		}
	};

	startLive = async () => {
		console.log("开通华通，走小辉宝。。");
		//1.0.6版本替换Face++
		let bizToken = "";
		if (yhTools.isHigherVersion()) {
			// 1.0.6版本
			bizToken = await this.face_getFaceBizToken();
		}

		let params = {
			needUpload: true,
			url: yhTools.isHigherVersion()
				? InterfaceG.face_xhbFaceAuthV2
				: InterfaceG.checkFaceAuthApp,
			header: this.props.authHeader, //头部信息
			bizToken,
			params: {
				channelCode: "YHB",
				version: "1.0",
				bizToken,
				productNo: "1"
			},
			_alertShow: false
		};
		yhTools.startLiveFace(params).then(resp => {
			const { data, status } = resp;
			if (status === "1000") {
				if (data.code === "0") {
					this.props.history.replace("/electronicAccountExist");
				} else {
					Toast.info(data.message, 2);
				}
			}
		});
	};
	checkFaceAgreement = e => {
		e.stopPropagation();
		this.props.history.push("/faceAgreement");
	};
	showModal = () => {
		this.setState({
			isVisible: true
		});
	};
	onModalClick = booleanValue => {
		this.setState({
			isVisible: false
		});
		!booleanValue && this.props.history.goBack();
	};
	render() {
		const _pageParams = {
			header: {
				title: "人脸识别"
			},
			isModal: true,
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const { isVisible } = this.state;
		return (
			<div>
				<MainLayout pageParams={_pageParams} handleBack={this.showModal}>
					<BackModal
						product={"1"}
						isVisible={isVisible}
						onClick={this.onModalClick}
					/>
					<div className="liveness-wrapper">
						<div className="bg-white">
							<p className="remind">
								为了保障您的信息安全，需要进行人脸识别验证
							</p>
							<img src={camera} alt="摄像头" className="icon" />
							<div className="image-require">
								<div className="line-div" />
								<div className="line-div image_require-tip">
									人脸识别拍摄示例
								</div>
								<div className="line-div" />
							</div>
							<div className="img-list">
								{remindImgList.map((item, index) => (
									<div style={{ width: "22%" }} key={index}>
										<div
											className="code"
											style={{
												width: "100%",
												height: 0,
												paddingBottom: "92.5%",
												background: `url(${item})`,
												backgroundSize: "cover"
											}}
										/>
									</div>
								))}
							</div>
						</div>

						<div className="agree-wrapper">
							<a className="huise">查看</a>
							<span
								className="font-link one-line"
								onClick={this.checkFaceAgreement}
							>
								《人脸识别协议》
							</span>
						</div>
						<Button style={{ marginTop: "60px" }} onClick={this.startLive}>
							开始人脸识别
						</Button>
					</div>
				</MainLayout>
			</div>
		);
	}
}

export default Liveness;
